import React from 'react';
import { Modal, Form, Input, Alert } from 'antd';

import { FormInstance } from 'antd/es/form';

const layout = {
  labelCol: { span: 4 },
  wrapperCol: { span: 20 },
};

export class GuidedRegistration extends React.Component<{visible: boolean;onCancel: Function}>{
	formRef = React.createRef<FormInstance>();
	state = {
		confirmLoading: false
	}

	render(){
		const { visible } = this.props;
		const { confirmLoading } = this.state;
		return (
			<>
				<Modal
			        title="请完善资料"
			        visible={visible}
			        width="700px"
			        onOk={() => { this.props.onCancel() }}
			        confirmLoading={confirmLoading}
			        onCancel={() => { this.props.onCancel() }}
			    >
			    	<Alert
				      message="为了提升服务质量，请完善您的联系方式。（绝不推销，信息安全保密）"
				      type="warning"
				    />
			    	<div style={{padding: '30px 30px'}}>
			    	
			        <Form {...layout} ref={this.formRef} name="control-ref" >
			        	<Form.Item name="nc" label="昵称：" rules={[{ required: true }]}>
				          <Input placeholder="昵称保存后不能修改"/>
				        </Form.Item>
			        	<Form.Item name="qq" label="QQ号码：" rules={[{ required: true }]}>
				          <Input placeholder="QQ号码" />
				        </Form.Item>
				        <Form.Item name="wx" label="微信号：" rules={[{ required: true }]} extra="QQ号\微信号，请至少填写一项，订单有问题，我们好及时和你沟通。">
				          <Input placeholder="微信号码"/>
				        </Form.Item>
				        
			        </Form>
			        </div>
			    </Modal>
			</>
		)
	}
}